<template>
	<view>
		<div class="titStyle">
			<h1>为您设置一张证件照吧</h1>
		</div>
		<div>
			<swiper class="swiper">
				<swiper-item>
					<image class="imageSize" src="../../static/xingxiang.png" mode=""></image>
				</swiper-item>
				<swiper-item>
					<div class="upwz">
						<image @click="dian" class="imgSiz" src="../../static/my_icon_camera_n.png" mode=""></image>
						<p class="findS">自定义形象照</p>
						<p class="findS">让你形象独一无二</p>
						<image v-if="idCardImage" :src="idCardImage" mode="widthFix"></image>
						<image v-if="photoPath" :src="photoPath" mode="widthFix" class="photo"></image>
					</div>
				</swiper-item>

			</swiper>
			<view class="bb">

			</view>
			<view v-if="show" class="tan">
				<div class="dingWei">
					<button class="butt" @click="openCamera">拍一张</button>
					<button class=" butt" @click="chooseImage">手机相册选择</button>
					<button class="butt" @click="close">取消</button>
				</div>

			</view>
		</div>
		<div>
			<button class="finishStyle" @click="finishCk">完成设置</button>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				fileList1: [],
				show: false,
				idCardImage: '',
				photoPath: '' // 存储拍照后的图片路径  
			}
		},
		methods: {
			close() {
				this.show = false
			},
			dian() {
				console.log(111);
				this.show = !this.show
			},
			finishCk() {
				uni.navigateTo({
					url: "/pages/PersonalHomepage/PersonalHomepage"
				})
			},
			chooseImage() {
				this.tt = true
				uni.chooseImage({
					count: 1, // 默认为9，设置为1表示只选择一张图片  
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有  
					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有  
					success: (res) => {
						// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片  
						this.idCardImage = res.tempFilePaths[0];

					}
				});

			},
			openCamera() {
				uni.chooseImage({
					count: 1, // 默认为9，这里设置为1表示只选择一张图片  
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有  
					sourceType: ['camera'], // 只从相机拍照，不会从相册选择  
					success: (res) => {
						// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片  
						if (res.tempFiles && res.tempFiles.length > 0) {
							this.photoPath = res.tempFiles[0]
								.path; // 注意：在某些平台上可能是res.tempFilePaths[0]，这里使用res.tempFiles以兼容更多情况  
						}
					}
				});
			}

		}
	}
</script>

<style>
	.tan {
		width: 100vw;
		height: 100Vh;
		background-color: #ccc;
		background: rgba(0, 0, 0, 0.5);
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 999;


	}

	.bb {
		background-color: #4694EC;
	}

	.dingWei {
		width: 714rpx;
		position: absolute;
		left: 0;
		bottom: 30rpx;
		padding: 20rpx;
	}

	.butt {
		margin-bottom: 20rpx;
		border-radius: 15rpx;
	}

	.findS {
		font-size: 25rpx;
		margin-top: 20rpx;

	}

	.titStyle {
		width: 741rpx;
		height: 200rpx;
		line-height: 200rpx;
		padding: 60rpx;

		font-size: 40rpx;
		font-weight: 600;
		color: #4694EC;
	}

	.imageSize {
		width: 100%;
		height: 800rpx;
	}


	.swiper {
		width: 600rpx;
		height: 800rpx;
		padding: 10rpx 80rpx;
	}

	.swiper swiper-item {
		margin-right: 70rpx;
		border: 3rpx solid #ccc;
		border-radius: 15rpx;
	}

	.finishStyle {
		width: 600rpx;
		border-radius: 15rpx;
		background-color: #4694EC;
		color: aliceblue;
		margin-top: 80rpx;
	}

	.imgSiz {
		width: 150rpx;
		height: 150rpx;
	}

	.upwz {
		margin-top: 25%;
		margin-left: 0%;
		text-align: center;
	}
</style>